<!-- 每个组件只能包含一个顶层<template>块，<template>块内的内容被传递给@vue/compiler-dom被预编译为JS渲染函数并附在导出组件上作为render -->
<template>
  <div class="message">{{ message }}</div>
</template>

<!-- 每个组件只能包含一个顶层<script>块，<script>块内的内容被作为ES模块执行，默认导出Vue组件选项对象 -->
<script>
export default {
  data() {
    return {
      message: 'Single-File Component'
    };
  },
};
</script>

<!-- 每个组件只能包含一个顶层<script setup>块，<script setup>块是组合式API的语法糖，而<script>块使用的是选项式API -->
<script setup>

</script>

<!-- 每个组件可以包含多个顶层<style>块，<style>块可使用scoped和module等属性 -->
<style scoped>
.message {
  font-weight: bold;
  font-size: 30px;
}
</style>